<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { ucTerminalRoleSeeApi } from '@/api/uc/set'
import { ElTree, ElLoading } from 'element-plus'
import { ucRoleListApi } from '@/api/uc/role'
import { ref } from 'vue'

const props = defineProps({
  terminalType: {
    type: String,
    default: () => null
  },
  list: {
    type: Array,
    default: () => null
  }
})

const roleData = ref<any>([])
const defaultProps = {
  children: 'children',
  label: 'role_name'
}
const treeRef = ref<ComponentRef<typeof ElTree>>()
const terminalRoleList = async () => {
  const loadingMain = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  const res = await ucTerminalRoleSeeApi({ terminal_type: props.terminalType })
    .catch(() => {})
    .finally(() => {
      setTimeout(() => {
        loadingMain.close()
      }, 500)
    })
  if (res) {
  }
}
const getList = async (data = {}) => {
  const loadingMain = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  const res = await ucRoleListApi({ ...data, is_sys: 1 })
    .catch(() => {})
    .finally(() => {
      setTimeout(() => {
        loadingMain.close()
      }, 500)
    })
  if (res) {
    roleData.value = res.data
    let arrnew = []
    props.list.forEach((element) => {
      arrnew.push(element.role_id)
    })
    treeRef.value!.setCheckedKeys(arrnew)
  }
}

const init = async () => {
  await terminalRoleList()
  await getList()
}
init()
defineExpose({
  getForm() {
    // return { ids: treeRef.value!.getCheckedKeys() }
    return { list: treeRef.value!.getCheckedNodes() }
  }
})
</script>

<template>
  <ContentWrap>
    <ElTree
      :data="roleData"
      :props="defaultProps"
      node-key="role_id"
      default-expand-all
      :expand-on-click-node="false"
      show-checkbox
      check-strictly
      ref="treeRef"
    >
      <template #default="{ node }">
        <span class="custom-tree-node">
          <span>{{ node.data.role_name }}</span>
        </span>
      </template>
    </ElTree>
  </ContentWrap>
</template>
